<template>
  <div class="app-container">
    <el-form ref="form" :model="formData" label-width="90px" style="width: 400px;">
      <el-form-item label="渠道名">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onEdit">更新</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {edit } from '@/api/channel'

export default {
  name: 'ChnEdit',
  data() {
    return {
      formData: {
        name: '',
        id: 0,
      },
      autoUpload: false,
      fileList: []
    }
  },
  computed: {

  },
  props: ['theme'],
  watch: {
    theme: function(nv, ov) {
      this.initFormData()
    }
  },
  mounted() {
    this.initFormData()
  },
  methods: {
    // 发布
    onEdit() {
      let data = {
        name: this.formData.name,
        id : this.formData.id
      }
      edit(data).then(res => {
        this.$message.success("更新成功!!!")
        this.$emit('close');
      })
    },
    // 初始化formData
    initFormData() {
      if (this.theme != undefined) {
        this.formData.name = this.theme.name
        this.formData.id = this.theme.id
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .avatar-img {
    width: 40px;
    height: 40px;
    border: 2px solid #409EFF; 
    border-radius: 5px;
  }
  .el-button--text {
    padding-top: 0px;
    color: #7C796E;
  }
  .op-form {
    background: #F5F9FF;
    border: 1px dashed #CCCCCC;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 12px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
</style>

